<template>
  <div class="register-page">
    <div class="overlay">
      <div class="register-container">
        <form @submit.prevent="handleRegister" class="register-form">
          <div class="title-row">
            <h2 class="login-title">注册</h2>
            <select v-model="userSystemRole" required class="identity-select">
              <option disabled value="">谁要注册？</option>
              <option value="student">学生</option>
              <!-- <option value="teacher">老师</option> -->
            </select>
          </div>

          <!-- 用户名输入框 -->
          <input
            v-model="userName"
            type="text"
            placeholder="请输入用户名"
            required
            minlength="3"
            title="用户名至少为3个字符"
          />

          <!-- 邮箱输入框 -->
          <input
            v-model="email"
            type="email"
            placeholder="请输入邮箱"
            required
            :pattern="emailPattern"
            title="请输入有效的邮箱地址"
          />

          <!-- 密码输入框 -->
          <input
            v-model="passWord"
            type="passWord"
            placeholder="请输入密码"
            required
            minlength="6"
            title="密码至少为6位"
          />

          <!-- 登录和注册按钮并排 -->
          <div class="btn-group">
            <button type="submit" class="register-button">注册</button>
            <button type="button" class="login-button" @click="goToLogin">
              已有账号？去登录
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>




<script setup>
import { ref } from "vue";
import { register } from "../api/auth";
import { useRouter } from "vue-router";

// 响应式变量
const userName = ref(""); // 👈 使用 userName 替代 userId
const email = ref("");
const passWord = ref("");
const router = useRouter();
const userSystemRole = ref(""); // 👈 添加对身份的响应式绑定

// 邮箱正则验证
const emailPattern = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;

// 注册处理函数
const handleRegister = async () => {
  try {
    await register({
      userName: userName.value, // 👈 注意字段名
      email: email.value,
      passWord: passWord.value,
      userSystemRole: userSystemRole.value,
    });
    alert("注册成功");
    router.push("/api/user/login");
  } catch (err) {
    alert("注册失败，请稍后重试");
  }
};

// 跳转到登录页
const goToLogin = () => {
  router.push("/api/user/login");
};
</script>



<style scoped>
.title-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  gap: 12px; /* 调整间距 */
  flex-wrap: wrap; /* 窄屏时自动换行 */
}

.login-title {
  font-size: 24px;
  margin: 0;
}

.identity-select {
  height: 32px;
  font-size: 14px;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: white;
  min-width: 100px;
}

.register-page {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url("../assets/shuai.png") no-repeat center center;
  background-size: cover;
}

.overlay {
  position: relative;
  width: 100%;
  height: 100%;
}

.register-container {
  position: relative;
  text-align: center;
  max-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertically center the content */
  align-items: center; /* Horizontally center the content */
}

.register-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; /* Send image to the background */
}

.register-form {
  position: relative;
  z-index: 1; /* Ensure form stays above the image */
  max-width: 400px;
  width: 100%;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
}

input {
  width: 98%;
  padding: 10px;
  margin: 10px 0;
  border-radius: 10px;
  border: 1px solid #ccc;
}

button {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #4caf50;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

.success-message {
  position: relative;
  z-index: 1; /* Ensure the success message stays above the image */
}

.btn-group {
  display: flex;
  justify-content: space-between;
  gap: 10px; /* 按钮之间的间距 */
  margin-top: 20px;
}

.login-button {
  flex: 1; /* 或使用具体百分比宽度：width: 40%; */
  padding: 10px;
  border-radius: 5px;
  border: none;
  background-color: #2196f3;
  color: white;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s;
}

.login-button:hover {
  background-color: #1976d2;
}

.register-button {
  flex: 1; /* 或使用具体百分比宽度：width: 60%; */
  padding: 10px;
  border-radius: 5px;
  border: none;
  background-color: #4caf50;
  color: white;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s;
}

.register-button:hover {
  background-color: #45a049;
}
</style>
